<template>
  <div>
    <van-field
      v-model="curValue"
      :name="config.code"
      :label="config.aliasName"
      :placeholder="`请输入${config.aliasName}`"
      :disabled="config.disabled"
      :readonly="config.readonly"
      :type="
        config.component == 'input-number' || config.component === 'input-money'
          ? 'number'
          : 'text'
      "
      :rules="[
        {
          required: config.isMust,
          message: `请正确的输入${config.aliasName}`,
          pattern: config.validRule ? new RegExp(config.validRule) : null,
        },
      ]"
    />
  </div>
</template>

<script>
import { Field } from "vant";

export default {
  name: "FormInput",
  components: {
    [Field.name]: Field,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    config: {
      type: Object,
      default: {},
    },
  },
  watch: {
    value: {
      handler(val) {
        this.curValue = val;
      },
      immediate: true,
    },
    curValue(val) {
      this.$emit("input", val);
    },
  },
  data() {
    return {
      curValue: undefined,
    };
  },
};
</script>

<style>
</style>